<template>
    <div>
        <el-dialog
                title="修改商品" width="50%"
                :visible.sync="dialogVisible">
            <el-form :model="editForm" :rules="rules" ref="goodFormRef">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                    <el-input v-model="editForm.price" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品折扣价" prop="nowPrice">
                    <el-input v-model="editForm.nowPrice" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="num">
                    <el-input v-model="editForm.num" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <el-upload action="http://localhost:8081/admin/file/upload"
                               :headers="header" name="image"
                               :on-remove="handleRemove"
                               :on-success="handle_success"
                               :limit="1"
                               :on-exceed="handleExceed"
                               :file-list="fileList"
                               list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品分类" prop="typeId">
                    <el-select v-model="editForm.typeId" placeholder="请选择">
                        <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品内容" prop="introduce">
                    <el-input v-model="editForm.introduce" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {file_delete, goods_getById, goods_update} from "../../network/goods";
    import {type_all} from "../../network/type";

    export default {
        name: "EditGood",
        data(){
            return{
                dialogVisible: false,
                id: '',
                editForm:{
                    name:'',
                    price:0,
                    nowPrice: 0,
                    num:0,
                    typeId: 0,
                    introduce: '',
                    imageUrl:''
                },
                typeList:[],
                fileList:[],
                rules:{
                    name:[{required: true,message:'请输入商品名称',trigger:'blur'}],
                    price:[{required: true,message:'请输入商品价格',trigger:'blur'}],
                    nowPrice:[{required: true,message:'请输入商品折扣价',trigger:'blur'}],
                    num:[{required: true,message:'请输入商品数量',trigger:'blur'}],
                    typeId:[{required: true,message:'请选择商品类型',trigger:'blur'}],
                    introduce:[{required: true,message:'请输入商品内容',trigger:'blur'}],
                },
                header:{Authorization:window.sessionStorage.getItem('token')}
            }
        },
        methods:{
            visible(){
                this.dialogVisible=true
            },
            getData(id){
                this.id=id
                goods_getById(id).then(res=>{
                    this.editForm=res.data;
                })
                type_all().then(res=>{
                    this.typeList=res.data.map(item=>{
                        return {
                            value:item.id,
                            label:item.typeName
                        }
                    })
                })
            },
            handleRemove(file, fileList) {
                file_delete(this.editForm.imageUrl).then(res=>{
                    console.log(res);
                })
                this.editForm.imageUrl=null
                console.log(file, fileList);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handle_success(res){
                this.editForm.imageUrl=res.url
                this.$message.success("上传成功！");
            },
            edit(){
                this.$refs.goodFormRef.validate(valid=>{
                    if (!valid){
                        return this.$message.error("请填写必要的表单项！")
                    }else {
                        goods_update(this.id,this.editForm).then(res=>{
                            if (res.code==200){
                                this.$message.success("商品修改成功！")
                            }else {
                                this.$message.error("商品修改失败！")
                            }
                        })
                    }
                 })
                this.fileList=[];
                this.$parent.getGoodList()
                this.dialogVisible=false;
                }
        }
    }
</script>

<style scoped>

</style>